<template>
    <div class="userEdit">
        <el-dialog title="菜单修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span slot="footer" class="dialog-footer">
                <div class="form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="菜名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="信息" prop="description">
                            <el-input v-model="ruleForm.description"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="菜品图片上传" prop="sex"> -->
                            <!-- <div style="width: 50px;height: 50px;">
                                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                                    multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </div> -->

                        <!-- </el-form-item> -->
                    </el-form>
                </div>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  name: 'dishEditView',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: Object

  },
  watch: {
    dialogInfo: {
      handler (newVal, oldVal) {
        this.ruleForm = Object.assign({
          name: newVal.name,
          price: newVal.price,
          description: newVal.description,
          id: newVal.id
        })
        // console.log(newVal, oldVal)
      }
    }
  },
  data () {
    return {
      ruleForm: {
        name: '',
        price: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入菜名', trigger: 'blur' },
          { min: 0, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入信息', trigger: 'blur' },
          { min: 0, max: 11, message: '号码不合法', trigger: 'blur' }
        ]
        // sex: [
        //   { type: 'array', required: true, message: '请选择性别', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:dialogVisible', false)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('update:dialogVisible', false)
          this.$emit('update:dialogInfo', this.ruleForm)
          Message({
            message: '修改成功!',
            type: 'success',
            duration: 2 * 1000
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
  <style>
